<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.css" rel="stylesheet">
</head>

<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        添加
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">添加图书</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 弹窗的内容 -->
                    <form id="createForm">
                        <div>
                            <label>书名 <br> <input type="text" placeholder="请输入书名" id="bookname" name="bookname"></label>
                        </div>
                        <div>
                            <label>作者 <br> <input type="text" placeholder="请输入作者" id="author" name="author"></label>
                        </div>
                        <div>
                            <label>出版社 <br> <input type="text" placeholder="请输入出版社" id="publisher"
                                    name="publisher"></label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <!-- 弹窗的关闭 -->
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <!-- 弹窗的保存 -->
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="baocun">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面渲染的数据在这里 -->
    <table id="data">
        <!-- <tr>
            <th>Id</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr> -->
    </table>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/js/bootstrap.js"></script>
    <script>
        // 查
        (function () {
            fetch('http://192.168.22.24:4000/books')
                .then(res => res.json())
                .then(res => {
                    const lists = res.data.map((el) => {
                        return `
                        <tr>
                            <td>${el.id}</td>
                            <td>${el.bookname}</td>
                            <td>${el.author}</td>
                            <td>${el.publisher}</td>
                            <td>
                                <button class='delete' data-id='${el.id}'>删除</button>
                                <button class='upload' data-id='${el.id}'>修改</button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">添加图书</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 弹窗的内容 -->
                    <form id="createForm">
                        <div>
                            <label>书名 <br> <input type="text" placeholder="请输入书名" id="bookname" name="bookname" value="1"></label>
                        </div>
                        <div>
                            <label>作者 <br> <input type="text" placeholder="请输入作者" id="author" name="author"></label>
                        </div>
                        <div>
                            <label>出版社 <br> <input type="text" placeholder="请输入出版社" id="publisher"
                                    name="publisher"></label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <!-- 弹窗的关闭 -->
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <!-- 弹窗的保存 -->
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="baocun">保存</button>
                </div>
            </div>
        </div>
    </div>


                            </td>
                        </tr>
                    `
                    }).join('')
                    document.querySelector('#data').innerHTML = `
                        <tr>
                            <th>Id</th>
                            <th>书名</th>
                            <th>作者</th>
                            <th>出版社</th>
                            <th>操作</th>
                        </tr>
                    ` + lists
                    // 删除的前提是页面要有内容，所以写在渲染的后面
                    // 删
                    // 获取删除的按钮
                    const deleteBtns = document.querySelectorAll('.delete')
                    // 获取的是一个伪数组，遍历数组给每个元素添加点击事件
                    deleteBtns.forEach((el) => {
                        el.onclick = (e) => {
                            // ？？？
                            const id = e.target.dataset.id
                            fetch('http://192.168.22.24:4000/books?id=' + id, {
                                // 删除事件是delete
                                method: 'delete'
                            }).then(res => res.json()).then(res => console.log(res))
                        }
                    })
                    // 修改的前提是页面要有内容，所以写在渲染的后面
                    // 修改
                    // 获取元素
                    const uploadBtns = document.querySelectorAll('.upload')
                    uploadBtns.forEach((el) => {
                        el.onclick = (e) => {
                            const id = e.target.dataset.id
                        }
                    })

                })
        }())
            // 增
            ; (function () {
                // 获取保存的按钮
                const baocun = document.querySelector('#baocun')
                // 获取弹窗的整个表单结构
                const createForm = document.querySelector('#createForm')
                baocun.onclick = () => {
                    // const a = {
                    //     a: 1,
                    //     b: 2
                    // }
                    // a.c = 2
                    // delete a.a
                    // a.b
                    // a.b = 3

                    // const data = new FormData()
                    // data.append('a', 1)
                    // data.delete('a')
                    // data.append('b', 1)
                    // data.get('b')
                    // data.set('b', 2)

                    // data.append()



                    // new一个FormData存数据
                    const formData = new FormData(createForm)
                    // 将数据存到FormData里面
                    // ？？？
                    const bookname = formData.get('bookname')
                    const author = formData.get('author')
                    const publisher = formData.get('publisher')
                    console.log(bookname, author, publisher)
                    fetch('http://192.168.22.24:4000/books', {
                        method: 'POST',
                        headers: {
                            'content-type': 'application/json'
                        },
                        // ？？？
                        body: JSON.stringify({
                            bookname,
                            author,
                            publisher
                        })
                        // body: formData
                    }).then(res => res.json()).then(res => {
                        console.log(res)
                    })
                }
            }())
    </script>
</body>

</html>